<template>
    <div class="page-wrapper">
        <div class="login-left">
            <div class="bg-circle"></div>
            <div class="tip-box">
                <span class="tip-text-title">
                    学习是为了有更多的选择，让生活变的更美好！
                </span>
                <span class="tip-text-small">
                    何以解忧，唯有学习
                </span>
            </div>
            <img src="@/assets/images/login.svg" alt="" class="lgoin-img">
        </div>
        <div class="login-right">

            <el-form :model="formData" :rules="rules" class="form-wrapper" label-width="80px" ref="formRef" @keyup.enter="handleLogin">
                <div class="form-title">登录</div>

                <el-form-item label="用户名：" prop="userName">
                    <el-input v-model="formData.userName"></el-input>
                </el-form-item>
                <el-form-item label="密码：" prop="passWord">
                    <el-input v-model="formData.passWord" type="password"></el-input>
                </el-form-item>

                <el-button :loading="isLoading" style="width: 60%;" type="primary" @click="handleLogin">登录</el-button>
            </el-form>

        </div>
    </div>
</template>

<script setup lang='ts'>
    import { reactive, ref,Ref} from 'vue';
    import {useCurrentInstance} from '@/utils/useCurrentInstance'
    import {ElForm} from 'element-plus';

    // 校验规则
    import {loginValidate} from '@/vaildates/login'
    import {publicInterface} from '@/types/public'

    interface formDataInterface {
        passWord: string,
        userName: string
    }

    interface loginRespInterface extends publicInterface {
        token: string
    }

    // 全局方法
    const {proxy:vm} = useCurrentInstance();

    const formData:formDataInterface = reactive({
        passWord: '123456',
        userName: 'admin'
    })

    const rules = loginValidate;

    const isLoading: Ref<Boolean> = ref(false);

    // 表单ref
    // 也可以跟vue2一样获取this之后在通过ref进行校验
    // vm.$refs.formRef.validate
    // formRef.value?.validate
    type FormType = InstanceType<typeof ElForm>
    const formRef = ref<FormType>()

    const handleLogin = () => {
        isLoading.value = true;
        formRef.value?.validate(async (valid: Boolean | undefined) => {
            if(!valid){
                isLoading.value = false;
                return;
            };

            const {userName,passWord} = formData;

            const resp: {data:loginRespInterface} = await vm.$http.post(vm.$api.public.login,{
                userName,
                passWord
            });


            if(resp.data.code !== 200){
                vm.$message.error(resp.data.msg);
            }else{
                sessionStorage.setItem('token',resp.data.token);
                sessionStorage.setItem('userInfo',JSON.stringify(resp.data.data));
                vm.$message.success(resp.data.msg);
                vm.$router.push('/home');
            }

            isLoading.value = false;

        });

    }
</script>


<style lang="scss" scoped>
.page-wrapper {
    display: flex;
    align-items: center;
    height: 100vh;
    width: 100%;
}

.login-left {
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.bg-circle {
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: -100%;
    transform: translateX(50%);
    transform: translateY(-50%);
    border-radius: 50%;
    background-color: $hs-color;
}

.tip-box {
    padding-top: 100px;
    display: flex;
    z-index: 1;
    flex-direction: column;
    align-items: center;
    color: #fff;
}

.tip-text-title {
    font-weight: 600;
    font-size: 20px;
    padding-bottom: 12px;
}

.lgoin-img {
    z-index: 1;
    width: 400px;
    height: 400px;
    position: absolute;
    bottom: 24px;
    right: 100px;
}

.login-right {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.form-wrapper {
    text-align: center;
    padding: 24px;
    width: 500px;
    box-shadow: 0 6px 10px #aaa;
}

.form-title {
    font-size: 22px;
    font-weight: 600;
    color: $hs-color;
    text-align: center;
    padding-bottom: 24px;
}
</style>